<template>
  <div class="system-container">
    <div class="page-header">
      <h2>系统设置</h2>
      <div class="header-actions">
        <el-button type="primary" @click="handleSave">
          <el-icon><Check /></el-icon>
          保存设置
        </el-button>
        <el-button @click="handleReset">
          <el-icon><Refresh /></el-icon>
          重置
        </el-button>
      </div>
    </div>
    
    <!-- 设置选项卡 -->
    <el-tabs v-model="activeTab" class="system-tabs">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <div class="setting-section">
          <h3>系统信息</h3>
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" />
            </el-form-item>
            <el-form-item label="系统版本">
              <el-input v-model="basicSettings.version" readonly />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input
                v-model="basicSettings.description"
                type="textarea"
                :rows="3"
              />
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicSettings.contactEmail" />
            </el-form-item>
            <el-form-item label="维护模式">
              <el-switch
                v-model="basicSettings.maintenanceMode"
                active-text="开启"
                inactive-text="关闭"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <!-- 学期设置 -->
      <el-tab-pane label="学期设置" name="semester">
        <div class="setting-section">
          <h3>当前学期</h3>
          <el-form :model="semesterSettings" label-width="120px">
            <el-form-item label="学年">
              <el-select v-model="semesterSettings.academicYear">
                <el-option label="2023-2024" value="2023-2024" />
                <el-option label="2024-2025" value="2024-2025" />
                <el-option label="2025-2026" value="2025-2026" />
              </el-select>
            </el-form-item>
            <el-form-item label="学期">
              <el-select v-model="semesterSettings.semester">
                <el-option label="第一学期" value="1" />
                <el-option label="第二学期" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="开学日期">
              <el-date-picker
                v-model="semesterSettings.startDate"
                type="date"
                placeholder="选择开学日期"
              />
            </el-form-item>
            <el-form-item label="结束日期">
              <el-date-picker
                v-model="semesterSettings.endDate"
                type="date"
                placeholder="选择结束日期"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <!-- 成绩设置 -->
      <el-tab-pane label="成绩设置" name="score">
        <div class="setting-section">
          <h3>成绩配置</h3>
          <el-form :model="scoreSettings" label-width="120px">
            <el-form-item label="及格分数">
              <el-input-number
                v-model="scoreSettings.passingScore"
                :min="0"
                :max="100"
              />
            </el-form-item>
            <el-form-item label="优秀分数">
              <el-input-number
                v-model="scoreSettings.excellentScore"
                :min="0"
                :max="100"
              />
            </el-form-item>
            <el-form-item label="成绩录入截止">
              <el-switch
                v-model="scoreSettings.scoreInputDeadline"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="允许修改成绩">
              <el-switch
                v-model="scoreSettings.allowScoreModification"
                active-text="允许"
                inactive-text="禁止"
              />
            </el-form-item>
            <el-form-item label="成绩公开">
              <el-switch
                v-model="scoreSettings.scorePublic"
                active-text="公开"
                inactive-text="不公开"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <div class="setting-section">
          <h3>密码策略</h3>
          <el-form :model="securitySettings" label-width="120px">
            <el-form-item label="最小密码长度">
              <el-input-number
                v-model="securitySettings.minPasswordLength"
                :min="6"
                :max="20"
              />
            </el-form-item>
            <el-form-item label="密码复杂度">
              <el-checkbox-group v-model="securitySettings.passwordComplexity">
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码有效期">
              <el-input-number
                v-model="securitySettings.passwordExpireDays"
                :min="0"
                :max="365"
              />
              <span style="margin-left: 10px;">天（0表示永不过期）</span>
            </el-form-item>
            <el-form-item label="登录失败锁定">
              <el-switch
                v-model="securitySettings.loginFailureLock"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="最大失败次数">
              <el-input-number
                v-model="securitySettings.maxLoginFailures"
                :min="3"
                :max="10"
                :disabled="!securitySettings.loginFailureLock"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      
      <!-- 备份设置 -->
      <el-tab-pane label="备份设置" name="backup">
        <div class="setting-section">
          <h3>数据备份</h3>
          <el-form :model="backupSettings" label-width="120px">
            <el-form-item label="自动备份">
              <el-switch
                v-model="backupSettings.autoBackup"
                active-text="启用"
                inactive-text="禁用"
              />
            </el-form-item>
            <el-form-item label="备份频率">
              <el-select v-model="backupSettings.backupFrequency" :disabled="!backupSettings.autoBackup">
                <el-option label="每日" value="daily" />
                <el-option label="每周" value="weekly" />
                <el-option label="每月" value="monthly" />
              </el-select>
            </el-form-item>
            <el-form-item label="备份时间">
              <el-time-picker
                v-model="backupSettings.backupTime"
                format="HH:mm"
                :disabled="!backupSettings.autoBackup"
              />
            </el-form-item>
            <el-form-item label="保留备份数">
              <el-input-number
                v-model="backupSettings.retainBackups"
                :min="1"
                :max="30"
              />
            </el-form-item>
          </el-form>
          
          <div class="backup-actions">
            <h4>手动备份</h4>
            <el-button type="primary" @click="handleBackup">
              <el-icon><Download /></el-icon>
              立即备份
            </el-button>
            <el-button type="success" @click="handleRestore">
              <el-icon><Upload /></el-icon>
              恢复备份
            </el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Check, 
  Refresh, 
  Download, 
  Upload 
} from '@element-plus/icons-vue'

// 当前选中的选项卡
const activeTab = ref('basic')

// 基本设置
const basicSettings = reactive({
  systemName: '学生成绩管理系统',
  version: 'v1.0.0',
  description: '一个功能完善的学生成绩管理系统，支持多角色权限管理。',
  contactEmail: 'admin@example.com',
  maintenanceMode: false
})

// 学期设置
const semesterSettings = reactive({
  academicYear: '2023-2024',
  semester: '2',
  startDate: new Date('2024-02-26'),
  endDate: new Date('2024-07-15')
})

// 成绩设置
const scoreSettings = reactive({
  passingScore: 60,
  excellentScore: 90,
  scoreInputDeadline: true,
  allowScoreModification: true,
  scorePublic: true
})

// 安全设置
const securitySettings = reactive({
  minPasswordLength: 6,
  passwordComplexity: ['lowercase', 'number'],
  passwordExpireDays: 0,
  loginFailureLock: true,
  maxLoginFailures: 5
})

// 备份设置
const backupSettings = reactive({
  autoBackup: true,
  backupFrequency: 'daily',
  backupTime: new Date('2024-01-01 02:00:00'),
  retainBackups: 7
})

// 方法
const handleSave = () => {
  ElMessage.success('设置保存成功')
}

const handleReset = () => {
  ElMessage.info('设置已重置为默认值')
}

const handleBackup = () => {
  ElMessage.success('数据备份已开始，请稍候...')
}

const handleRestore = () => {
  ElMessage.info('数据恢复功能开发中...')
}
</script>

<style lang="scss" scoped>
.system-container {
  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    h2 {
      margin: 0;
      color: #333;
    }
    
    .header-actions {
      display: flex;
      gap: 10px;
    }
  }
  
  .system-tabs {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    
    .setting-section {
      h3 {
        color: #333;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 1px solid #e4e7ed;
      }
      
      h4 {
        color: #666;
        margin: 20px 0 10px;
      }
      
      .backup-actions {
        margin-top: 30px;
        padding-top: 20px;
        border-top: 1px solid #e4e7ed;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .system-container {
    .page-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
      
      .header-actions {
        width: 100%;
        justify-content: flex-start;
      }
    }
    
    .system-tabs {
      padding: 15px;
    }
  }
}
</style>
